<template>
	<view class="basic-form">
		<u-form v-bind="getBindValue" :model="formModel" ref="formElRef">
      <u-form-item v-for="(schema, index) in getBindValue.schemas" :key="index" :prop="schema.field" :label="schema.label">
        <slot v-if="schema.slot" :name="schema.slot"></slot>
        <component v-else :is="componentMap[schema.component]" v-model:value="formModel[schema.field]" v-bind="{...schema.componentProps}"></component>
      </u-form-item>
    </u-form>
	</view>
</template>

<script lang="ts" setup>
  import { computed, reactive, useAttrs, ref, toRaw } from 'vue';
  import { basicProps } from './props'
  import * as componentMap from './components'
  const props = defineProps(basicProps)
  const attrs = useAttrs()
  const formElRef = ref(null)
	const getBindValue = computed(() => {
		return { ...attrs, ...props }
	})
  const formModel = reactive({})

  const getFieldsValue = () => {
    return toRaw(formModel)
  }
  const setFieldsValue = (values:any) => {
    Object.assign(formModel, values)
  }

  const resetFields = () => {
    if (formElRef.value) {
      formElRef.value?.resetFields()
    }
  }
  async function setProps(formProps: Partial<FormProps>): Promise<void> {
    propsRef.value = deepMerge(unref(propsRef) || {}, formProps);
  }
  const formActionType = {
    getFieldsValue,
    setFieldsValue,
    resetFields,
    updateSchema,
    resetSchema,
    setProps,
    removeSchemaByField,
    appendSchemaByField,
    clearValidate,
    validateFields,
    validate,
    submit: handleSubmit,
  };
</script>